<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js -- 入门 -- ChinaMap</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script>
        /**
        * D3.js绘制中国地图demo
        * step1:地图数据的获取-->china.geoJson
        * step2:投影函数-->geoJson的数据是经纬度信息，需要进一步处理成二维信息便于在页面中显示
        * step3:地理路径生成器
        * step4:服务器请求数据进行绘制
        */

        // 准备画布
        var width = 400;
        var height = 400;
        var svg = d3.select("boxy")
                    .append("svg")
                    .attr("width",width)
                    .attr("height",height)
        // 投影函数
        var projection = d3.geo.mercator()
                            .center([107,31])
                            .scale(850)
                            .translate([width/2,height/2])
        // 地理路径生成器
        var path = d3.geo.path()
                    .projection(projection)
        // 向服务器请求数据文件并绘制地图
        d3.json("china.geojson",function(error,root){
            if (error)
                return console.error(error);
            console.log(root.features);

        svg.selectAll("path")
            .data( root.features )
            .enter()
            .append("path")
            .attr("stroke","#000")
            .attr("stroke-width",1)
            .attr("fill", function(d,i){
                return color(i);
            })
            .attr("d", path )   //使用地理路径生成器
            .on("mouseover",function(d,i){
                d3.select(this)
                   .attr("fill","yellow");
            })
            .on("mouseout",function(d,i){
                d3.select(this)
                   .attr("fill",color(i));
            });
        })
    </script>
</body>
</html>
